<template>
	<view class="main-page">
		<view class="header-box">
			<view class="row-container width-100p">
				<image class="avatar" src="../../static/common/ic_avatar_female.png" v-if="customerData.sex == 0"></image>
				<image class="avatar" src="../../static/common/ic_avatar_male.png" v-if="customerData.sex == 1"></image>
				<view class="column-container height-126" style="justify-content: space-between;" >
					<text class="font-333-32 font-weight-600">{{customerData.realName}}</text>
					<view class="row-container mt-4">
						<text class="font-999-26">{{customerData.id}}</text>
						<view class="column-line"></view>
						<text class="font-999-26" v-if="customerData.sex == 1">男</text>
						<text class="font-999-26" v-if="customerData.sex == 0">女</text>
						<view class="column-line"></view>
						<text class="font-999-26">联系电话：{{customerData.mobile}}</text>
					</view>
					<text class="font-999-26 mt-4">注册时间：{{customerData.createTime}}</text>
				</view>
			</view>
			<view class="add-btn-box" @click="clickAddRemarks">
				<image class="wh-36 mr-10" src="../../static/common/ic_add.png"></image>
				<text class="font-fff-32 font-weight-600">添加备注</text>
			</view>
		</view>
		
		<view class="remark-list-box">
			<view class="row-container-row-between service-count-box">
				<view class="row-container" style="position: relative;">
					<text class="font-333-36 font-weight-600" style="z-index: 50;">备注信息</text>
					<view class="title-line"></view>
				</view>
				<text class="font-666-28">共{{totalCount}}条</text>
			</view>
			
			<view class="column-container width-100p" v-if="dataList.length > 0">
				<view class="data-item" v-for="(item , index) in dataList" :key="index">
					<text class="font-333-28 font-weight-600" style="line-height: 40rpx;">
						{{item.intro}}
					</text>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-999-24">{{item.addTime}}</text>
						<view class="row-container">
							<view class="row-container" @click="handleClickTop(item)">
								<image v-if="item.checkTop == 1" class="wh-34" 
								src="../../static/common/ic_top_red.png"></image>
								<image v-else class="wh-34"
								src="../../static/common/ic_top.png"></image>
								<text class="font-f94-24 ml-2" v-if="item.checkTop == 1">置顶</text>
								<text class="font-999-24 ml-2" v-else>置顶</text>
							</view>
							<view class="row-container ml-30" @click="handleEditRemarks(item)">
								<image class="wh-34" src="../../static/common/ic_edit_grey.png"></image>
								<text class="font-999-24 ml-2">编辑</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<NoData hint="暂无备注信息" v-else></NoData>
		</view>
		
		<view class="window-main" v-if="showAddWindow">
			<view class="add-window">
				<text class="font-333-36 font-weight-600">{{editRemarkId ? '编辑备注' : '添加备注'}}</text>
				
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">备注内容</text>
				</view>
				<textarea
					v-model="addRemarkStr"
					class="input-area"
					placeholder="请输入备注内容"
					placeholder-class="font-999-32"
				></textarea>
				
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">备注日期</text>
				</view>
				
				<view class="row-container mt-14 width-100p" >
					<uni-datetime-picker
						type="datetime"
						v-model="remarkTime"
						@change="changeRemarkTime"
						:border="false"
					>
						<view class="choose-time-box">
							<text class="font-333-28">{{remarkTime ? remarkTime :'请选择备注时间'}}</text>
							<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
						</view>
					</uni-datetime-picker>
				</view>
				
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="add-cancel" @click="clickCloseRemarks">取消</text>
					<text v-if="addRemarkStr" class="add-confirm" style="background: #F94C4B;"
						@click="handleAddRemark">确定</text>
					<text v-else class="add-confirm">确定</text>
				</view>
			</view>
		</view>
		
		<view class="window-main" v-show="showDeleteWindow">
			<view class="delete-window">
				<text class="font-333-36 font-weight-600">确认删除该备注吗？</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showDeleteWindow = false">取消</text>
					<text class="confirm-btn" @click="handleConfirmDelete">确定</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
		
	import NoData from '../../components/nodata.vue'
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				customId:'',
				customerData:{
					id:'',
					realName:'',
					mobile:'',
					createTime:''
				},
				dataList:[],
				
				showAddWindow:false,
				addRemarkStr:'' , // 添加的备注内容
				editRemarkId:''  ,// 编辑的备注id
				remarkTime:'' , // 备注的日期时间
				showDeleteWindow:false,
				
				page:1,
				hasMoreData:false,
				clickDeleteData:null ,// 删除的信息
				
				totalCount:0,//总数
				
			}
		},
		
		components:{
			NoData
		},
		
		onLoad(options) {
			this.customId = options.customId
			this.loadCustomerDetail()
			this.loadRemarkList()
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadCustomerDetail()
			this.loadRemarkList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++ 
				this.loadRemarkList()
			}
		},
		
		methods: {
			loadCustomerDetail(){
				if (!this.customId) return
				let that = this
				this.http({
					url:'/user/custom/findDetail',
					method:'POST',
					data:{
						customId : that.customId
					},
					success(res){
						if (res.code == 200){
							that.customerData = res.data
						}
					},
					failed(e){
					}
				})
				
			},
			
			loadRemarkList(){
				let that = this
				this.http({
					url:'/user/remark/findRemarkList',
					method:'POST',
					data:{
						customId : that.customId,
						pageNo:that.page,
						pageSize:20
					},
					success(res){
						if (res.code == 200){
							if (res.data.length > 0){
								that.totalCount = res.data[0].totalCount
							}
							
							if (that.page == 1){
								that.dataList = res.data
							} else{
								that.dataList = [...that.dataList, ...res.data]
							}
							
							if (!that.dataList || that.dataList.length < 1){
								that.totalCount = 0
							}
							
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
						
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//点击添加备注
			clickAddRemarks(){
				if (!this.utils.checkAuthority(constant.auth_add_remarks)){
					return
				}
				
				this.remarkTime = this.getCurrentTimeStr()
				this.showAddWindow = true
			},
			
			clickCloseRemarks(){
				this.addRemarkStr = ""
				this.showAddWindow = false
			},
			
			//确定添加备注
			handleAddRemark(){
				if (!this.customId) return
				let that = this
				
				let params = {customId : that.customId , intro:that.addRemarkStr}
				if (this.editRemarkId){
					this.$set(params , 'remarkId' , this.editRemarkId)
				}
				
				if (!this.remarkTime){
					this.remarkTime = this.getCurrentTimeStr()
				}
				this.$set(params , "addTime" , this.remarkTime)
				
				this.http({
					url:'/user/remark/saveCustomRemark',
					method:'POST',
					data:params,
					success(res){
						if (res.code == 200){
							that.showAddWindow = false
							that.addRemarkStr = ""
							that.editRemarkId = ""
							that.remarkTime = ""
							that.page = 1
							that.loadRemarkList()
							uni.$emit("refreshClientList")
						}
						
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
					}
				})
			},
			
			clickDelte(item){
				this.showDeleteWindow = true
				this.clickDeleteData = item
			},
			
			handleConfirmDelete(){
				if (!this.clickDeleteData) return
				
				let that = this
				this.http({
					url:'/user/remark/deleteRemark',
					method:'POST',
					data:{
						remarkId : this.clickDeleteData.id,
					},
					success(res){
						if (res.code == 200){
							that.showDeleteWindow = false
							that.page = 1
							that.loadRemarkList()
						}
					},
					failed(e){
					}
				})
			},
			
			//置顶 取消置顶
			handleClickTop(item){
				let checkTop = 0
				if (item.checkTop == 0){
					checkTop = 1
				}
				
				let that = this
				this.http({
					url:'/user/remark/remarkTop',
					method:'POST',
					data:{
						remarkId : item.id,
						checkTop  : checkTop
					},
					success(res){
						if (res.code == 200){
							item.checkTop = checkTop
							that.page = 1
							that.loadRemarkList()
						}
					},
					failed(e){
					}
				})
				
			},
			
			handleEditRemarks(item){
				if (!this.utils.checkAuthority(constant.auth_edit_remarks)){
					return
				}
				
				this.editRemarkId = item.id
				this.addRemarkStr = item.intro
				this.remarkTime = item.addTime
				this.showAddWindow = true
			},
			
			changeRemarkTime(e){
				console.log('changeRemarkTime---' , e)
				this.remarkTime = e
			},
			
			getCurrentTimeStr(){
				let date = new Date();
				let year = date.getFullYear()
				let month = date.getMonth() + 1;//当前月份
				let day = date.getDate();//天
				let hours = date.getHours();//小时
				let minute = date.getMinutes();//分
				let second = date.getSeconds();//秒
				let timeStr = year + "-" + month + "-" + day + " " + hours + ':' + minute + ":" + second
				return timeStr
			}
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		background: white;
		
		.avatar{
			width: 126rpx;
			height: 126rpx;
			margin-right: 24rpx;
		}
		
		.add-btn-box{
			background: #F94C4B;
			width: 100%;
			height: 88rpx;
			margin-top: 30rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		
		.column-line{
			width: 1rpx;
			height: 16rpx;
			background: #999999;
			margin: 0rpx 16rpx;
		}
	}
	
	.remark-list-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 30rpx 0rpx;
		
		.service-count-box{
			width: calc(100% - 60rpx);
			padding: 0rpx 30rpx;
			margin-bottom: 20rpx;
		}
		
		.title-line{
			background: linear-gradient(79.95deg, #EA3D3D 7.53%, rgba(234, 61, 61, 0) 92.47%);
			width: 144rpx;
			height: 10rpx;
			position: absolute;
			bottom: 0rpx;
		}
		
		.data-item{
			display: flex;
			flex-direction: column;
			width: calc(100% - 108rpx);
			margin: 0rpx 30rpx;
			padding: 24rpx;
			position: relative;
			background: white;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.add-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 220rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx;
		background: white;
		border-radius: 30rpx;
		
		.input-area{
			width: calc(100% - 48rpx);
			height: 312rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 24rpx;
			text-align: left;
			font-size: 32rpx;
			color: #333333;
			margin-top: 14rpx;
		}
		
		.choose-time-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 48rpx);
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 0rpx 24rpx;
		}
		
		.add-cancel{
			width: 200rpx;
			height: 85rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
			background: #F5F5F5;
			line-height: 85rpx;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.add-confirm{
			height: 85rpx;
			flex-grow: 1;
			border-radius: 10rpx;
			background: rgba(249, 76, 75, 0.5);
			line-height: 85rpx;
			text-align: center;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	
	.delete-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
</style>
